<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    :title="title"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    width="900px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div v-for="(detail, index) in details" class="detail-container">
        <div class="icon">
          <div class="sub-icon"></div>
        </div>

        <div class="timeline">{{ detail.createTime }}</div>

        <div class="detail-content">
          <div class="title">
            {{ record.userNames }}{{ get_dict_type(disputes_type, record.disputesType) }}第{{
              numberToChinese(index + 1)
            }}次调解记录
          </div>
          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">调解时间:</span>
              <span class="flex-item-content value f1">{{ detail.discoveryTime }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">调解意见及结果:</span>
              <span class="flex-item-content value f1">{{ detail.defuseMemo }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">是否进一步调解:</span>
              <span class="flex-item-content value f1">{{ detail.onDefuseStatus == 1 ? '是' : '否' }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label" style="min-width: 76px">当事人签名:</span>
              <div class="flex" style="width: 700px; overflow: scroll">
                <div v-for="(item, index) in detail.signatures" class="sign-wrap">
                  <div class="sing-info">
                    <div>{{ item.personName }}</div>
                    <div>({{ item.idCard }})</div>
                  </div>
                  <img
                    :id="item.signatureUrl"
                    :data-original="imgPrefix + item.signatureUrl"
                    :src="imgPrefix + item.signatureUrl"
                    @click="werImg(item.signatureUrl)"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">见证人签名:</span>
              <div class="flex">
                <div class="sign-wrap">
                  <div class="sing-info">{{ detail.witnessName }} ({{ detail.witnessMobile }})</div>
                  <img
                    id="witnessSignatureUrl"
                    :data-original="imgPrefix + detail.witnessSignatureUrl"
                    :src="imgPrefix + detail.witnessSignatureUrl"
                    @click="werImg('witnessSignatureUrl')"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      title: '调解记录',

      record: {},
      details: {},
      imgPrefix: '',
      risk_photo: [],
      disputes_type: [], // 线索类型
    }
  },
  methods: {
    show(record) {
      this.record = record
      this.publicVisible = true
      this.getDist()
      // this.get_risk_photo(record.id)

      this.get_disputes_defuse_record(record.id)
    },

    async get_risk_photo(id) {
      this.risk_photo = []
      let { result: risk_photo } = await getAction('/sys/images_path/list', { bizId: id, bizType: 25 })
      risk_photo.forEach((item) => {
        this.risk_photo.push(item.path)
      })
    },

    async get_disputes_defuse_record(defuseId) {
      let {
        result: { records },
      } = await getAction('/common/disputes_defuse_record/page', { defuseId, pageSize: 9999 })

      let signaturePromises = records.map(async (item) => {
        let signatureRecords = await this.get_disputes_defuse_signature(item.id)
        item.signatures = signatureRecords
        return item
      })

      let resolvedSignatures = await Promise.all(signaturePromises)
      this.details = resolvedSignatures
    },

    async get_disputes_defuse_signature(defuseRecordId) {
      let {
        result: { records },
      } = await getAction('/common/disputes_defuse_signature/page', { defuseRecordId, pageSize: 9999 })
      return records
    },

    async getDist() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()

      let { result: disputes_type } = await ajaxGetDictItems({ code: 'disputes_type' })
      this.disputes_type = disputes_type
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
    numberToChinese(number) {
      const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const chineseUnits = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '兆']

      let result = ''
      let unitIndex = 0
      let prevIsZero = false

      while (number > 0) {
        const digit = number % 10
        if (digit !== 0) {
          result = chineseNumbers[digit] + chineseUnits[unitIndex] + result
          prevIsZero = false
        } else {
          if (!prevIsZero) {
            result = chineseNumbers[digit] + result
          }
          prevIsZero = true
        }
        number = Math.floor(number / 10)
        unitIndex++
      }

      return result
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

.detail-container {
  position: relative;
  padding: 0 0 20px 15px;
  border-left: 1px dashed var(--theme-input-border);
  &:last-of-type {
    padding-bottom: 0;
  }

  .icon {
    position: absolute;
    top: 0;
    left: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #104c8a;

    .sub-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #abd5ff;
    }
  }

  .timeline {
    font-size: 14px;
    color: var(--theme-modal-label-value-color);
  }

  .detail-content {
    margin-top: 10px;
    padding: 20px;
    background: var(--theme-content-item-bg);
    border: 0.01rem solid var(--theme-input-border);
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;

    .mt-16 {
      margin-top: 16px;
    }

    .title {
      color: #e8f0ff;
    }
    .label {
      font-weight: 500;
      color: #1388ff;
    }

    .value {
      color: var(--theme-modal-label-value-color);
    }

    .img-wrap {
      min-width: 0;
      img {
        width: 120px;
        height: 80px;
        border-radius: 4px 4px 4px 4px;
        object-fit: cover;
        cursor: pointer;
        margin-right: 10px;
      }
    }
  }

  .sign-wrap {
    font-size: 14px;
    color: var(--theme-modal-label-value-color);
    margin-right: 10px;

    img {
      cursor: pointer;
      width: 214px;
      height: 69px;
      background: #104c8a;
      border-radius: 5px;
      margin-top: 10px;
    }
  }
}
</style>
